<template>
  <div id="views">
    <p class="logo textCenter">
      <img src="../../common/imgs/wklogob.png" alt="logo">
    </p>
    <div class="form">
      <div>
        <span class="leftIcon">
          <img src="../../common/imgs/usericon.png" alt="" class="inputicon">
        </span>
        <input type="number" placeholder="请输入账号" v-model="mobile" @input="inputChange" >
        <select name="country" id="country" v-model="country_id" class="selectGreyJt" >
          <!--onmousedown="javascript:return false;" @click="selCountry" -->
          <option v-for="(item,index) in areaCode_data" v-bind:value="item.id" v-bind:selected="index == 0">
            {{item.name_cn}}
          </option>
        </select>
      </div>
      <div>
        <span class="leftIcon">
          <img src="../../common/imgs/lock.png" alt="" class="inputicon">
        </span>
        <input type="password" placeholder="请输入密码" v-model="password" @input="inputChange" value="5">
      </div>
      <p class="forgetPws">
        <router-link to="/forget_pws">忘记密码？</router-link>
      </p>
      <div class="submit">
        <button :class="buttonClass" @click="login">登 录</button>
      </div>
    </div>
    <p class="notmobile">
      还没有账号？
      <router-link :to="{path: '/register' , query:{inviter_uid : inviter_uid , inviter_code : inviter_code}}" class="toregister">去注册>></router-link>
    </p>
  </div>
</template>
<script>
  import {postLogin , getAreaCode , wxGet} from '../../http/api';
  import store from '../../store/store';
  import '../../common/css/iosselect.css';
  export default {
    name: 'login',
    data() {
      return {
        introduce: '登录',
        mobile: '',
        password: '',
        areaCode_data: '',//国家列表
        area_code: '',//区域id
        country_id : '',//国家id
        inviter_uid : '',//inviter_uid
        inviter_code : '',//邀请码
        buttonClass: null //登录按钮 是否置灰
      }
    },
    watch:{
      'country_id'( val ){
        let thiz = this, data = this.areaCode_data;
        this.for( data , function ( item , index ) {
          if( val === item.id){
            thiz.area_code = data[index].area_code;
          }
        })
      }
    },
    methods: {
      inputChange() {
        this.buttonClass = this.mobile && this.password ? 'allow' : null;
      },
      selCountry() {
        // let thiz = this;
        // let iosSelect = require('../../common/js/iosselect').iosSelect;
        // let iosSelArr = [];
        // thiz.for(thiz.areaCode_data, function (item) {
        //   item.value = item.name_cn;
        //   iosSelArr.push(item);
        // });
        // iosSelect(1, [iosSelArr], {
        //   container: '#app',
        //   title: '选择国籍',
        //   oneLevelId: thiz.country_id,//默认选中的
        //   itemHeight: 40,
        //   itemShowCount: 7,
        //   callback: function (res) {
        //     thiz.area_code = res.area_code;
        //     thiz.country_id = res.id;
        //   }
        // });
      },
      loginSuccess( data ){
        require('../../common/js/toast').toast('登录成功');
        let user = data.user,
          thiz = this;
        store.commit('mobile',user.telphone || thiz.mobile);
        store.commit('areaCode',user.area_code || thiz.area_code);
        store.commit('name', data.user.user_name);
        store.commit('uid', data.user.uid);
        thiz.$router.push({path: '/entrance'});
      },
      bindWx(){
        let isWx = window.navigator.userAgent.toLowerCase().match(/MicroMessenger/i) == 'micromessenger';
        let thiz = this;
        if( isWx ){
          //微信状态下，绑定微信
          wxGet().then(res => {
            let code = Number(res.code);
            switch ( code ) {
              case 706:
                window.location.href = res.data;
                break;
              case 200:
                thiz.loginSuccess(res.data);
                break;
            }
          });
        }
      },
      login() {
        let thiz = this;
        if (this.buttonClass) {
          let params = {
            telphone: thiz.mobile,
            area_code: thiz.area_code,
            password: thiz.password,
            country_id : thiz.country_id
          };
          postLogin(params).then(res => {
            if (res.code == 200) {
              thiz.loginSuccess(res.data);
            }
          });
        }
      }
    },
    mounted() {
      let thiz = this;
      var arr = [1,2,3];
      var str = JSON.stringify(arr);
      let inviter_uid = this.getUrlKey("inviter_uid");//判断是否有邀请uid
      thiz.inviter_uid = inviter_uid;
      thiz.inviter_code = this.getUrlKey("inviter_code") ;//判断是否有邀请inviter_code
      this.$store.commit('inviter_uid', inviter_uid);
      var query = this.$route.query;
      if (query.mobile) {
        thiz.mobile = query.mobile;
      }
      getAreaCode().then(function (res) {
        thiz.areaCode_data = res.data.country;
        thiz.country_id = query.country_id ? query.country_id : thiz.areaCode_data[0].id;
      });
      this.inputChange();
      this.bindWx();
    },
    destroyed() {
      require('../../common/js/iosselect').delSelect();
    }
  }
</script>
<style lang="less" type="text/less" scoped>
  #views{min-height: 100%;background: #fff;}
  .forgetPws{
    text-align: right;
    a{
      color: #FFD203;font-size: 0.28rem;padding:0.25rem 0.25rem 0 0.25rem;
    }
  }
  .logo{padding:1.04rem 0;background: #fff;}
  .logo>img{width: 1.74rem;height: 1.12rem;text-align: center;}
  .form{
    padding: 1.2rem 0.8rem;padding-top: 0;
    >div{
      background: #f7f7f7;border-radius: 1rem;height: 1.2rem;padding: 0rem 0.45rem;position: relative;text-align: left;
      >.leftIcon{
        display: inline-block;width: 0.27rem;height: 0.33rem;position: absolute;z-index: 1;left: 0.45rem;top:50%;margin-top: -0.165rem;
        .inputicon{
          width: 100%;height: 100%;
        }
      }
      input::-webkit-input-placeholder{color:#AFB2B8;font-size: 0.32rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
      input::-moz-placeholder {color:#AFB2B8;font-size: 0.32rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
      input:-ms-input-placeholder{color:#AFB2B8;font-size: 0.32rem;font-family: 'PingFang-SC-Regular','PingFang-SC-Medium,微软雅黑', Helvetica, Arial, sans-serif;}
      input{width: 100%;height: 100%;padding-left:0.46rem;background: none;font-size: 0.32rem}
    }
    >div:first-child{
      input{
        width: calc( 100% - 1.8rem );
      }
    }
    >div:nth-child(2){margin-top: .3rem;}
    .submit{
      margin-top: .5rem;overflow: hidden;padding:0;
      button{
        width: 100%;height: 100%;background: none;font-size: .36rem;
      }
      .allow{
        background: #ffd203;
      }
    }
    #country{
      width: 1.45rem;position: absolute;right: 0.52rem;font-size: .28rem;bottom:0;margin-top: -0.05rem;height: 100%;
      padding:0 0.15rem;padding-right: 0.35rem;padding-left: 0;line-height: 200%;
    }
  }
  .notmobile{font-size: .28rem;color: #AFB2B8;text-align: center;padding: 0.68rem 0.4rem;padding-top: 0;}
  .toregister{color:#ffd203}
</style>
